<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>侧边栏</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    header{
      height: 80px;
      box-shadow: 0 0 10px rgb(0 0 0 / 10%);
      line-height: 80px;
      text-align: right;
    }
    button{
      padding: 8px 20px;
      background: #317aae;
      color: #fff;
      border: none;
      margin-right: 20px;
    }
    main {
      width: 800px;
      margin: 200px auto;
      text-align: center;
    }

    aside {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 200px;
      background: rgba(0, 0, 0, 0.158);

      /* display: none; */
      /* visibility: hidden; */

      /* transform: translateX(-100%); */
    }

    li {
      height: 50px;
      line-height: 50px;
      text-indent: 20px;
      cursor: pointer;
    }

    li.active {
      background: #317aae;
      color: #fff;
    }
    .copyright{
      width: 100%;
      position: absolute;
      bottom: 0;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-top: 1px solid #000;
    }
    li:hover{
      background-color: #317aae;
      font-size: 130%;
      color: bisque;
      
    }
  </style>
</head>

<body>
  <header>
    <button id="sidebar" class="show">侧边栏</button>
  </header>
  <main>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos necessitatibus consequatur eius nobis fugiat. Quo,
      obcaecati exercitationem magni odit in minima earum magnam velit odio architecto aliquid nulla porro ea.</p>
      <div>
        <button>切换明亮主题</button>
        <button>切换黑暗主题</button>
      </div>
  </main>
  <aside id="app-sidebar" class="show">
    <ul>
      <li class="highlighted">Home</li>
      <li>About Us</li>
      <li>Contact Us</li>
    </ul>
    <div class="copyright">© 2022</div>
  </aside>
  <script>
  const oUl = document.querySelector('#app-sidebar ul')
  const oLi = document.querySelector('#app-sidebar li')
  oUl.onclick = function (e) {
    const target = e.target
    if (target.tagName == 'LI'){
      for (let i = 0; i < length; i++){
        aLi[i].classList.remove('highlighted')
      }
      target.classList.add('highlighted')
    }
  }
  </script>
</body>

</html>